7 tháng 9, 2025Tiếng Việt

Khám phá JavaScript Module Federation để tạo hệ thống plugin động. Tìm hiểu kiến trúc, triển khai và các phương pháp hay nhất cho ứng dụng có thể mở rộng, bảo trì.

Kiến trúc Plugin JavaScript Module Federation: Xây dựng Hệ thống Plugin Động

Trong bối cảnh phát triển web phức tạp ngày nay, việc xây dựng các ứng dụng modular, có khả năng mở rộng và dễ bảo trì là rất quan trọng. Một kỹ thuật mạnh mẽ để đạt được điều này là thông qua kiến trúc plugin, nơi chức năng được chia thành các module độc lập, được tải động. JavaScript Module Federation, một tính năng của Webpack 5, cung cấp một cơ chế mạnh mẽ để triển khai các kiến trúc như vậy. Bài viết này sẽ đi sâu vào sự phức tạp của việc sử dụng Module Federation để xây dựng một hệ thống plugin động.

Module Federation là gì?

Module Federation cho phép các ứng dụng JavaScript chia sẻ mã một cách linh động tại thời gian chạy. Điều này có nghĩa là một module (một đoạn mã) từ một ứng dụng có thể được sử dụng trực tiếp bởi một ứng dụng khác mà không cần phải xây dựng lại hoặc triển khai lại. Điều này đạt được bằng cách phơi bày (exposing) và tiêu thụ (consuming) các module qua các bản dựng khác nhau và thậm chí là các lần triển khai khác nhau.

Các phương pháp chia sẻ mã truyền thống, chẳng hạn như các gói npm, yêu cầu phải xây dựng lại và triển khai lại các ứng dụng tiêu thụ mỗi khi một phụ thuộc được chia sẻ được cập nhật. Module Federation loại bỏ chi phí này, làm cho nó trở nên lý tưởng cho các kịch bản đòi hỏi cập nhật thường xuyên và triển khai độc lập.

Tại sao nên sử dụng Module Federation cho Kiến trúc Plugin?

Module Federation mang lại một số lợi thế khi xây dựng kiến trúc plugin:

Tải Module động: Các plugin có thể được tải và gỡ bỏ tại thời gian chạy, cho phép các ứng dụng thích ứng với các yêu cầu thay đổi mà không cần triển khai lại toàn bộ.
Tách rời (Decoupling): Các plugin được phát triển và triển khai độc lập, giảm sự phụ thuộc giữa các phần khác nhau của ứng dụng.
Khả năng mở rộng: Ứng dụng có thể dễ dàng được mở rộng với các plugin mới mà không ảnh hưởng đến chức năng hiện có.
Khả năng bảo trì: Các plugin có thể được cập nhật và bảo trì độc lập, giảm nguy cơ gây ra lỗi trong ứng dụng lõi.
Tái sử dụng mã: Các plugin có thể được tái sử dụng trên nhiều ứng dụng, thúc đẩy tính nhất quán và giảm nỗ lực phát triển.
Quản lý phiên bản và Quay lui (Rollbacks): Bạn có thể quản lý các phiên bản khác nhau của plugin và dễ dàng quay trở lại các phiên bản trước đó nếu cần.

Các khái niệm cốt lõi: Host và Remote Containers

Module Federation xoay quanh hai khái niệm chính:

Host Container: Ứng dụng chính tiêu thụ các module từ xa (plugin).
Remote Container: Ứng dụng phơi bày các module (plugin) để được host tiêu thụ.

Host container tự động lấy tệp remote entry từ remote container, tệp này chứa một bản kê khai (manifest) các module được phơi bày. Sau đó, host có thể truy cập và sử dụng các module này như thể chúng là một phần của mã nguồn của chính nó.

Triển khai Hệ thống Plugin Động với Module Federation: Hướng dẫn từng bước

Hãy cùng đi qua quy trình xây dựng một hệ thống plugin đơn giản sử dụng Module Federation. Chúng ta sẽ tạo một ứng dụng host và một ứng dụng plugin từ xa.

1. Thiết lập Ứng dụng Host (Host Container)

Đầu tiên, tạo một thư mục dự án mới và khởi tạo một dự án npm mới:

            mkdir host-app
cd host-app
npm init -y

Cài đặt Webpack và các phụ thuộc của nó:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

Tạo một tệp `webpack.config.js` trong thư mục `host-app` với cấu hình sau:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

Giải thích:

`name`: Tên của ứng dụng host.
`remotes`: Xác định các remote container mà host sẽ tiêu thụ. Trong trường hợp này, nó đang tiêu thụ một remote container tên là `plugin` từ `http://localhost:3001/remoteEntry.js`. Cú pháp `Plugin@` có nghĩa là `name` của ModuleFederationPlugin của remote là 'Plugin'.
`shared`: Liệt kê các phụ thuộc được chia sẻ giữa host và remote container. Điều này ngăn chặn việc tải các bản sao trùng lặp của những phụ thuộc này. Việc sử dụng `shared` là rất quan trọng để tránh lỗi và đảm bảo chức năng plugin hoạt động đúng.

Tạo một thư mục `src` và thêm một tệp `index.js` với nội dung sau:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Plugin...</div>}>
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Giải thích:

Chúng ta đang sử dụng `React.lazy` để nhập động `PluginComponent` từ remote `plugin`. Điều này rất quan trọng để tải lười (lazy loading) plugin và tránh sự chậm trễ khi tải ban đầu.
Thành phần `Suspense` được sử dụng để xử lý trạng thái tải trong khi plugin đang được lấy về.

Tạo một thư mục `public` và thêm một tệp `index.html` với nội dung sau:

            <!DOCTYPE html>
<html>
<head>
  <title>Host Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>

Thêm một tệp cấu hình Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Cập nhật tệp `package.json` của bạn với một script khởi động:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

2. Thiết lập Ứng dụng Remote (Plugin Container)

Tạo một thư mục dự án mới cho plugin:

            mkdir plugin-app
cd plugin-app
npm init -y

Cài đặt Webpack và các phụ thuộc của nó:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

Tạo một tệp `webpack.config.js` trong thư mục `plugin-app` với cấu hình sau:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

Giải thích:

`name`: Tên của remote container (plugin). Tên này phải khớp với tên được sử dụng trong cấu hình `remotes` của host.
`filename`: Tên của tệp remote entry mà host sẽ lấy.
`exposes`: Xác định các module được phơi bày bởi remote container. Trong trường hợp này, chúng ta đang phơi bày module `PluginComponent`. Khóa './PluginComponent' được sử dụng trong câu lệnh import của host (ví dụ: `import('plugin/PluginComponent')`).
`shared`: Giống như host, liệt kê các phụ thuộc được chia sẻ. Điều quan trọng là các phụ thuộc được chia sẻ và phiên bản của chúng phải tương thích giữa host và remote.

Tạo một thư mục `src` và thêm một tệp `PluginComponent.jsx` với nội dung sau:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}>
      <h2>Plugin Component</h2>
      <p>This is a dynamically loaded plugin!</p>
    </div>
  );
};

export default PluginComponent;

Tạo một tệp `index.js` trong thư mục `src` để xuất PluginComponent:

            import PluginComponent from './PluginComponent';

export default PluginComponent;

Tạo một thư mục `public` và thêm một tệp `index.html` với nội dung sau:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>

Thêm một tệp cấu hình Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Cập nhật tệp `package.json` của bạn với một script khởi động:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

3. Chạy các ứng dụng

Khởi động cả ứng dụng host và ứng dụng plugin bằng cách chạy `npm start` trong các thư mục tương ứng của chúng.

Truy cập `http://localhost:3000` trong trình duyệt của bạn. Bạn sẽ thấy ứng dụng host với thành phần plugin được tải động.

Các tính năng nâng cao và những điều cần cân nhắc

Quản lý phiên bản và Quay lui

Module Federation hỗ trợ quản lý phiên bản, cho phép bạn quản lý các phiên bản khác nhau của plugin. Bạn có thể chỉ định các ràng buộc phiên bản trong cấu hình `remotes` của host. Ví dụ:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}

Điều này cho host biết phải sử dụng phiên bản 1.0.0 của plugin. Nếu có phiên bản mới hơn, host sẽ tiếp tục sử dụng phiên bản đã chỉ định cho đến khi được cập nhật rõ ràng. Việc triển khai quản lý phiên bản một cách mạnh mẽ là rất quan trọng để ngăn chặn các thay đổi gây lỗi và đảm bảo sự ổn định của ứng dụng.

Những lưu ý về bảo mật

Khi sử dụng Module Federation, bảo mật là yếu tố tối quan trọng. Hãy xem xét những điều sau:

Xác thực và Ủy quyền: Triển khai các cơ chế xác thực và ủy quyền phù hợp để đảm bảo chỉ những người dùng được ủy quyền mới có thể truy cập và sử dụng plugin.
Toàn vẹn mã: Xác minh tính toàn vẹn của các module từ xa để ngăn chặn mã độc hại bị tiêm vào ứng dụng. Cân nhắc sử dụng Chính sách Bảo mật Nội dung (CSP) để hạn chế các nguồn mà ứng dụng có thể tải tài nguyên.
Quản lý phụ thuộc: Quản lý cẩn thận các phụ thuộc của cả host và remote container để tránh các lỗ hổng bảo mật. Thường xuyên cập nhật các phụ thuộc lên phiên bản mới nhất.
Xác thực đầu vào: Xác thực tất cả dữ liệu nhận được từ các module từ xa để ngăn chặn các cuộc tấn công tiêm nhiễm (injection attacks).
CORS (Chia sẻ tài nguyên chéo nguồn gốc): Cấu hình CORS đúng cách để cho phép ứng dụng host truy cập tệp remote entry từ ứng dụng plugin.

Khám phá và Quản lý Plugin

Đối với các hệ thống plugin phức tạp hơn, bạn có thể cần một cơ chế để khám phá và quản lý plugin. Điều này có thể đạt được thông qua một sổ đăng ký plugin (plugin registry) hoặc một dịch vụ khám phá. Một sổ đăng ký trung tâm có thể lưu trữ thông tin về các plugin có sẵn, bao gồm vị trí, phiên bản và các phụ thuộc của chúng. Ứng dụng host sau đó có thể truy vấn sổ đăng ký để tìm và tải các plugin phù hợp.

Hãy xem xét các cách tiếp cận sau:

Cấu hình tập trung: Lưu trữ URL của plugin trong một tệp cấu hình trung tâm (ví dụ: tệp JSON) mà ứng dụng host đọc tại thời gian chạy. Điều này cho phép bạn dễ dàng thêm, xóa hoặc cập nhật plugin mà không cần triển khai lại ứng dụng host.
Khám phá dựa trên API: Tạo một điểm cuối API trả về danh sách các plugin có sẵn. Ứng dụng host sau đó có thể lấy danh sách này và tải động các plugin.
Kiến trúc hướng sự kiện: Sử dụng một event bus hoặc hàng đợi tin nhắn để thông báo cho ứng dụng host khi có plugin mới. Điều này cho phép khám phá và tải plugin một cách bất đồng bộ.

Cấu hình động và Kích hoạt Plugin

Cho phép người dùng cấu hình và kích hoạt plugin một cách linh động là một tính năng mạnh mẽ. Điều này đòi hỏi một cơ chế để lưu trữ và quản lý cấu hình plugin. Bạn có thể sử dụng cơ sở dữ liệu, tệp cấu hình hoặc dịch vụ cấu hình dựa trên đám mây để lưu trữ cài đặt plugin. Ứng dụng host sau đó có thể đọc các cài đặt này tại thời gian chạy và kích hoạt các plugin tương ứng. Hãy cân nhắc cung cấp một giao diện người dùng để quản lý cấu hình plugin.

Xử lý các hoạt động bất đồng bộ và Xử lý lỗi

Khi làm việc với các plugin được tải động, điều cần thiết là phải xử lý các hoạt động bất đồng bộ và lỗi một cách mượt mà. Sử dụng `async/await` hoặc Promises để quản lý mã bất đồng bộ. Triển khai xử lý lỗi phù hợp để bắt và ghi lại bất kỳ lỗi nào xảy ra trong quá trình tải hoặc thực thi plugin. Cung cấp thông báo lỗi đầy đủ thông tin cho người dùng. Cân nhắc sử dụng một dịch vụ ghi log lỗi tập trung để theo dõi lỗi trên tất cả các plugin.

Tách mã (Code Splitting) và Tối ưu hóa hiệu suất

Để tối ưu hóa hiệu suất, hãy sử dụng kỹ thuật tách mã để chia nhỏ ứng dụng và các plugin thành các khối nhỏ hơn. Điều này cho phép trình duyệt chỉ tải xuống mã cần thiết cho một trang hoặc tính năng cụ thể. Webpack cung cấp hỗ trợ tích hợp cho việc tách mã. Cân nhắc sử dụng tải lười (lazy loading) để chỉ tải các plugin khi chúng cần thiết. Thu nhỏ (Minify) và nén mã để giảm kích thước tệp.

Kiểm thử và Tích hợp liên tục

Kiểm thử kỹ lưỡng hệ thống plugin của bạn để đảm bảo nó hoạt động chính xác. Viết các bài kiểm thử đơn vị, kiểm thử tích hợp và kiểm thử đầu cuối. Sử dụng hệ thống tích hợp liên tục (CI) để tự động chạy các bài kiểm thử mỗi khi có thay đổi về mã. Triển khai một đường ống phân phối liên tục (CD) để tự động hóa việc triển khai ứng dụng và các plugin.

Ví dụ và các trường hợp sử dụng trong thực tế

Module Federation đang được sử dụng trong nhiều ứng dụng thực tế, bao gồm:

Nền tảng thương mại điện tử: Tải động các đề xuất sản phẩm, cổng thanh toán và nhà cung cấp dịch vụ vận chuyển. Ví dụ, một nền tảng thương mại điện tử toàn cầu có thể sử dụng Module Federation để tích hợp các nhà cung cấp thanh toán khác nhau dựa trên vị trí của khách hàng. Ở Bắc Mỹ, nó có thể tải một plugin cho Stripe, trong khi ở Châu Âu, nó có thể tải một plugin cho PayPal hoặc Klarna.
Hệ thống quản lý nội dung (CMS): Cho phép người dùng cài đặt và kích hoạt các plugin để mở rộng chức năng của CMS. Một CMS có thể cho phép người dùng cài đặt các plugin để tối ưu hóa SEO, tích hợp mạng xã hội hoặc phân tích nội dung.
Bảng điều khiển và Nền tảng phân tích: Tải động các widget và các hình thức trực quan hóa khác nhau. Một nền tảng phân tích toàn cầu có thể tải các plugin cho các nguồn dữ liệu khác nhau, chẳng hạn như Google Analytics, Adobe Analytics hoặc Salesforce.
Kiến trúc Microfrontend: Xây dựng các ứng dụng web quy mô lớn dưới dạng một tập hợp các microfrontend có thể triển khai độc lập. Một doanh nghiệp lớn có thể sử dụng Module Federation để xây dựng ứng dụng web của mình dưới dạng một tập hợp các microfrontend, mỗi microfrontend chịu trách nhiệm cho một chức năng kinh doanh cụ thể, chẳng hạn như quản lý tài khoản, danh mục sản phẩm hoặc xử lý đơn hàng.
Hệ thống thiết kế (Design Systems): Chia sẻ các thành phần UI và các token thiết kế trên nhiều ứng dụng. Một tổ chức toàn cầu có nhiều thương hiệu có thể sử dụng Module Federation để chia sẻ một hệ thống thiết kế chung trên tất cả các ứng dụng của mình, đảm bảo tính nhất quán và giảm nỗ lực phát triển.

Các phương pháp hay nhất để xây dựng Hệ thống Plugin Động với Module Federation

Dưới đây là một số phương pháp hay nhất cần ghi nhớ khi xây dựng hệ thống plugin động với Module Federation:

Giữ cho Plugin nhỏ và tập trung: Mỗi plugin nên chịu trách nhiệm cho một chức năng cụ thể. Điều này giúp việc bảo trì và cập nhật các plugin dễ dàng hơn.
Xác định giao diện Plugin rõ ràng: Xác định các giao diện rõ ràng về cách các plugin tương tác với ứng dụng host. Điều này đảm bảo các plugin tương thích với host và ngăn chặn các thay đổi gây lỗi.
Sử dụng Semantic Versioning: Sử dụng phiên bản ngữ nghĩa để quản lý các phiên bản của plugin. Điều này giúp theo dõi các thay đổi và đảm bảo tính tương thích dễ dàng hơn.
Cung cấp tài liệu: Cung cấp tài liệu rõ ràng và ngắn gọn cho các plugin của bạn. Điều này giúp người dùng hiểu cách cài đặt, cấu hình và sử dụng các plugin.
Thực hiện các phương pháp bảo mật tốt nhất: Tuân thủ các phương pháp bảo mật tốt nhất để bảo vệ ứng dụng và các plugin của bạn khỏi các lỗ hổng.
Giám sát hiệu suất Plugin: Giám sát hiệu suất của các plugin để xác định bất kỳ điểm nghẽn nào. Tối ưu hóa mã để cải thiện hiệu suất.
Tự động hóa việc triển khai: Tự động hóa việc triển khai ứng dụng và các plugin của bạn. Điều này làm giảm nguy cơ lỗi và đảm bảo các bản cập nhật được triển khai nhanh chóng.
Sử dụng phong cách mã hóa nhất quán: Thực thi một phong cách mã hóa nhất quán trên tất cả các plugin. Điều này làm cho mã dễ đọc và bảo trì hơn.
Viết kiểm thử đơn vị: Viết các bài kiểm thử đơn vị cho các plugin của bạn để đảm bảo chúng hoạt động chính xác.
Sử dụng Linter: Sử dụng một linter để tự động kiểm tra lỗi trong mã của bạn.

Kết luận

JavaScript Module Federation cung cấp một cơ chế mạnh mẽ và linh hoạt để xây dựng các hệ thống plugin động. Bằng cách tận dụng Module Federation, bạn có thể tạo ra các ứng dụng modular, có khả năng mở rộng và dễ bảo trì, có thể thích ứng với các yêu cầu thay đổi. Bằng cách tuân theo các phương pháp hay nhất được nêu trong bài viết này, bạn có thể xây dựng các hệ thống plugin mạnh mẽ và an toàn, đáp ứng nhu cầu của tổ chức bạn.

Công nghệ này đặc biệt có giá trị trong bối cảnh quốc tế, cho phép các doanh nghiệp tùy chỉnh các sản phẩm phần mềm của họ cho các khu vực hoặc phân khúc khách hàng cụ thể mà không cần triển khai các ứng dụng hoàn toàn riêng biệt. Từ việc tích hợp các cổng thanh toán địa phương đến việc cung cấp nội dung theo khu vực, Module Federation tạo điều kiện cho trải nghiệm người dùng được cá nhân hóa và hiệu quả hơn trên toàn cầu.